<!--
*@author 白晴语
*@date 2023-10-12 9:45
*@description:
-->
<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <NavBar @skipRouter="getRoute"></NavBar>
      </el-header>
      <el-main style="box-sizing: content-box">
        <router-view></router-view>
      </el-main>
      <div class="footer ">
        <div class="wrapper">
          <div class="top">
            <ul>
              <li>
                <span>至臻体验</span>
              </li>
              <li>
                <span>快乐生活</span>
              </li>
              <li>
                <span>分享乐趣</span>
              </li>
            </ul>
          </div>
          <div class="bottom">
            <p>
              <a href="#">关于我们</a> |
              <a href="#">关于我们</a> |
              <a href="#">关于我们</a> |
              <a href="#">关于我们</a> |
              <a href="#">关于我们</a> |
              <a href="#">关于我们</a> |
              <a href="#">关于我们</a>
            </p>
            <p>心里咨询师</p>
          </div>
        </div>
      </div>
    </el-container>
  </div>
</template>
<script>
import NavBar from "./components/NavBar.vue";

export default {
  name: "App",
  components: {NavBar},
  props: {},
  data() {
    return {}
  },
  methods: {
    getRoute(viewPath){
      this.$router.push({
        path: viewPath
      })
    }
  },
  setup() {

  }
}
</script>

<style scoped>
.footer {
  height: 342px;
  background-color: #333;
}
.footer .wrapper {
  width: 1393px;
}
.footer .top {
  padding-top: 59px;
  padding-left: 135px;
  height: 175px;
  border-bottom: 1px solid #434343;
}

.footer .top li {
  position: relative;
  float: left;
  margin-right: 300px;
  width: 195px;
  height: 58px;
  /* background-color: pink; */
  line-height: 58px;
}

.footer .top li:last-child {
  margin-right: 0 ;
}


/* 第二个li里面的before添加背景图位置属性 */
.footer .top li:nth-child(2)::before {
  background-position: -64px 0;
}

.footer .top li:nth-child(3)::before {
  background-position: -130px 0;
}

.footer .top li span {
  margin-left: 77px;
  font-size: 28px;
  color: #fff;
}

.footer .bottom {
  padding-top: 40px;
  font-size: 14px;
  color: #999;
  text-align: center;
}

.footer .bottom a {
  font-size: 14px;
  color: #999;
}

.footer .bottom p {
  margin-bottom: 20px;
}
</style>
 